﻿
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery UI Example Page</title>
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		</head>
	<body>
	<h1>Welcome to jQuery UI!</h1>
	<form>
<table>
    <tr>
        <td>用户名</td>
        <td><input type="text" id="user" onfocus="textFocus('#user');"/></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="text" id="pwd" onfocus="textFocus('#pwd');"/></td>
    </tr>
    <tr>
        <td><input type="submit" value="提交" /></td>
        <td><input type="reset" value="设置"/></td>
    </tr>
</table>
</form>



<div id="keys" style="position:absolute; width:300px;height:145px; background:#ff0;display:none; left:0;top:0;">
  <div id="title" style="height:24px; padding-top:4px;">
  <span style="color:#0f0; font-size:12px; float:left;">*点击按键即可输入</span> 
    <a href="javascript:" id="close" onclick="$('#keys').hide();" style="float:right; text-decoration:none; margin-right:14px;">取消</a>
  </div>
    <a href="javascript:">1</a><a href="javascript:">2</a><a href="javascript:">3</a><a href="javascript:">4</a><a href="javascript:">5</a><a href="javascript:">6</a><a href="javascript:">7</a><a href="javascript:">8</a><a href="javascript:">9</a><a href="javascript:">0</a><br/>
    <a href="javascript:">Q</a><a href="javascript:">W</a><a href="javascript:">E</a><a href="javascript:">R</a><a href="javascript:">T</a><a href="javascript:">Y</a><a href="javascript:">U</a><a href="javascript:">I</a><a href="javascript:">O</a><a href="javascript:">P</a><br/>
    <a href="javascript:">A</a><a href="javascript:">S</a><a href="javascript:">D</a><a href="javascript:">F</a><a href="javascript:">G</a><a href="javascript:">H</a><a href="javascript:">J</a><a href="javascript:">K</a><a href="javascript:">L</a><br/>
    <a href="javascript:">Z</a><a href="javascript:">X</a><a href="javascript:">C</a><a href="javascript:">V</a><a href="javascript:">B</a><a href="javascript:">N</a><a href="javascript:">M</a>
    <input type="button"  style="float:left;text-align:right;  margin-left:100px;" value="确定" onclick="$('#keys').hide();"/>
</div>
<script>
	var _id=""
	function textFocus(id){
    //   alert(id);
  //   if(!id.equals(_id)){  
  //       	$(id).val(""); 
	//     } 
       _id = id;
    var $keys = $("#keys");
    $keys.show();
          var lt = $(id).offset().left+90;
          var tp =$(id).offset().top+18;
		  $keys.css("left",lt+"px");
		  $keys.css("top",tp+"px");
		  
		  
        
          $("#keys a").not("#close").unbind("click");
          $("#keys a").not("#close").css("width","25px");
		  $("#keys a").not("#close").css("hight","40px");
		  $("#keys a").not("#close").css("float","left");
		  $("#keys a").not("#close").css("text-decoration","none");
          
    $("#keys a").not("#close").click(
        function (){
 
            $(_id).val($(_id).val()+$(this).text());
        //  alert($(_id).val());
        }
    )
  
    id = "";
}


</script>
</body>
